<!DOCTYPE html>
<html>
<head>
<meta name="window-area" content="left:0;top:0;width:720;height:570">
<meta charset="UTF-8">
<title>${map.title}</title>
<script type="text/javascript" src="/res/js/keydefine.js"></script>
<link rel="stylesheet" type="text/css" href="${map.res}/css/list_public.css" />
<style type="text/css">
body{ background-image: url("${map.res}/images/${map.name}_bg.png"); background-repeat: no-repeat;}
</style>
<script type="text/javascript" src="/health/articleList"></script>
<script type="text/javascript" src="/health/subMenu"></script>
<script type="text/javascript">
var curFocusLoc=0;
var area=0;
document.onkeypress = grabevent;
document.onirkeypress = grabevent;
document.onkeydown = grabevent;
function grabevent()
{
	var val = event.keyCode?event.keyCode:event.which;  
	return keypress(val);
}


function keypress(key_val) 
{	
	switch (key_val) 
	{
		case 49:
		window.location.href="index.html";
		return 0;
		case KEY_UP :
		case KEY_PAGEUP: 
			pressKey_up();
			return 0;
		case KEY_DOWN :
		case KEY_PAGEDOWN:
			pressKey_down();
			return 0;
		case KEY_LEFT : 
			pressKey_left();		
			return 0;
		case KEY_RIGHT :
			pressKey_right();
			return 0;
		case KEY_OK :	
			pressKey_ok();			
			return 0;			
		 case KEY_RETURN :
             RocME.exit();    //退出浏览器进入菜单
             return 0;
         case KEY_HOME :  
             RocME.exit(2);    //退出浏览器进入菜单
             return 0;
         case KEY_EXIT:
             RocME.exit(1);    //退出浏览器进入直播
             return 0;
		default : 
			return 1;
	}
	return 0;
}

function pressKey_up()
{
	freeFocus();
    if(area==0)
    {
        if(curFocusLoc>0 && curFocusLoc<=menu.length)
        {
            curFocusLoc--;
        }
    }
    else if(area==1)
    {
        if(curFocusLoc>0 && curFocusLoc<=article.length)
        {
            curFocusLoc--;
        }
    }
	setFocus();
}


function pressKey_down()
{
    freeFocus();
    if(area==0)
    {
        if(curFocusLoc>=0 && curFocusLoc<menu.length-1)
        {
            curFocusLoc++;
        }
    }
    else if(area==1)
    {
        if(curFocusLoc>=0 && curFocusLoc<article.length-1)
        {
            curFocusLoc++;
        }
    }
    setFocus();
}

function pressKey_left()
{
	freeFocus();
	if(area==1)
    {
        area=0;
        curFocusLoc=0;
    }
	setFocus();
}

function pressKey_right()
{
	freeFocus();
    if(area==0)
    {
        area=1;
        curFocusLoc=0;
    }
	setFocus();
	}
	
function setFocus()
{
	if(area==0)
    {
        $("menuitem_"+curFocusLoc).style.color="#ff0000";
    }
    else if(area==1)
    {
        $("article_"+curFocusLoc).style.color="#fffd37";
    }
}

function freeFocus()
{
    if(area==0)
    {
        $("menuitem_"+curFocusLoc).style.color="#b88401";
    }
    else if(area==1)
    {
        $("article_"+curFocusLoc).style.color="#000000";
    }
}

function pressKey_ok()
{
	
}
function InitPage()
{
	initData();
	setFocus();
}
function initData() {
	for(var i=0;i<=3;i++)
	{	
		$("menuitem_"+i).innerText=menu[i];
	}
	for(var i=0;i<article.length;i++)
    {
        $("article_"+i).innerText=article[i];
    }
}
</script>
</head>
<body onload="InitPage()">
<div id="menu">
	<div id="menuitem_0" class="menuitem"></div>
	<div id="menuitem_1" class="menuitem"></div>
	<div id="menuitem_2" class="menuitem"></div>
	<div id="menuitem_3" class="menuitem"></div>
</div>
<div id="article">
	<div id="article_0" class="articleitem"></div>
	<div id="article_1" class="articleitem"></div>
	<div id="article_2" class="articleitem"></div>
	<div id="article_3" class="articleitem"></div>
	<div id="article_4" class="articleitem"></div>
	<div id="article_5" class="articleitem"></div>
	<div id="article_6" class="articleitem"></div>
	<div id="article_7" class="articleitem"></div>
	<div id="article_8" class="articleitem"></div>
	<div id="article_9" class="articleitem"></div>
</div>
</body>
</html>